<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参考案例精彩赏析</title>
    <!-- Import style -->
    <link rel="stylesheet" href="../../static/vendor/element-plus@2.3.6/dist/index.css" />
    <link rel="stylesheet" href="../../static/vendor/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
    <!-- Import Vue 3 -->
    <script src="../../static/vendor/vue@3.3.4/dist/vue.global.prod.js"></script>
    <!-- Import component library -->
    <script src="../../static/vendor/element-plus@2.3.6/dist/index.full.min.js"></script>
    <style>html{font-size:13px;}</style>
</head>

<body>
    <h1>参考案例精彩赏析</h1>
    <div id="app">
        <div class="my-3" v-for="(item,idx) of list" :key="idx">
            <h5>{{item.text}}</h5>
            <div class="list-group list-group-horizontal flex-wrap">
                <a class="list-group-item mb-1" :href="item2.link" target="_blank"
                    v-for="(item2,idx2) of item.data" :key="idx2">{{item2.text}}</a>
            </div>
        </div>
        
    </div>
    <script src="./data/websites.js"></script>
    <script>
        const RootComponent = {
            data() {
                return {
                    version: '1.0.0',
                    list: websites,
                }
            },
        }
        var app = Vue.createApp(RootComponent);
        app.use(ElementPlus);
        app.mount('#app')
    </script>
</body>

</html>